{% extends "base.html" %}

{% block head %}
    <link rel="stylesheet" href="{% static 'highlight/styles/default.min.css' %}">
    <script src="{% static 'highlight/highlight.min.js' %}"></script>
{% endblock %}

{% block main %}
        <h1>{{ blog.title }}</h1>
    <hr>
    <div class="mt-2">
        <img src="{% static 'img/网站图标.ico' %}" class="rounded-circle" height="30">
        <span class="ms-2">{{ blog.author }}</span>
        <span class="ms-2">于</span>
        <span class="ms-2">{{ blog.pub_time|date:"Y年m月d日 h时i分" }}</span>
    </div>
    <hr>
    <div class="py-2">
        {{ blog.content|safe }}
    </div>
    <hr>
    <div class="mt-2">
        <h3>评论({{ blog.comments.all|length }})</h3>
        <form action="{% url 'blog:pub_comment'%}" method="POST">
            {% csrf_token %}
            <input type="hidden" name="blog_id" value="{{ blog.id }}">
            <div class="mt-2">
                <input type="text" class="form-control" placeholder="请输入评论内容" name="content" >
            </div>
            <div class="mt-2 text-end">
                <button type="submit" class="btn btn-primary">提交评论</button>
            </div>
        </form>
    </div>

    <div class="mt-2">
        <ul class="list-group list-group-flush">
            {% for comment in blog.comments.all %}
            <li class="list-group-item">
                <div class="d-flex justify-content-between text-secondary">
                    <div class="user-info">
                        <img src="{% static 'img/网站图标.ico' %}" class="rounded-circle" height="40">
                        <span class="ms-2">{{ comment.author.username }}</span>
                    </div>
                    <div class="create-time" style="line-height: 40px">{{ comment.pub_time|date:"Y年m月d日 h时i分" }}</div>
                </div>
                <div class="mt-3">{{ comment.content }}</div>
            </li>
            {% endfor %}
        </ul>
    </div>
    
    <script>
    hljs.highlightAll()
    </script>
{% endblock %}